<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp"%>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/select2/select2.css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/select2/select2-metronic.css"/>
    <!-- END PAGE LEVEL SCRIPTS -->
    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="assets/css/pages/login.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-toastr/toastr.min.css"/>

    <!-- END THEME STYLES -->
    <style type="text/css">
        body {
            background-image: url("img/login/login.jpg");
            background-repeat: no-repeat;
        }

        #content {
            opacity: 0.5;
            filter: alpha(opacity=40); /* For IE8 and earlier */
        }

        #content:hover {
            opacity: 1.0;
            filter: alpha(opacity=100); /* For IE8 and earlier */
        }
    </style>
</head>
<!-- BEGIN BODY -->
<body class="login">
<!-- BEGIN LOGO -->
<div class="logo">
    <a href="index">
        <img src="img/logo/logo_3.png" style="width: 150px" alt="logo"/>
    </a>
</div>
<!-- END LOGO -->
<!-- BEGIN LOGIN -->
<div class="content" id="content">
    <!-- BEGIN REGISTRATION FORM -->
    <form class="register-form" action="public/registerDo" method="post">
        <h3>欢迎加入我们 </h3>

        <p>
            必填信息 :
        </p>

        <div class="form-group">
            <label for="loginName" class="control-label visible-ie8 visible-ie9">账号</label>

            <div class="input-icon">
                <i class="fa fa-user"></i>
                <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="账号"
                       name="loginName" id="loginName"/>
            </div>
        </div>

        <div class="form-group">
            <label for="userName" class="control-label visible-ie8 visible-ie9">姓名</label>

            <div class="input-icon">
                <i class="fa fa-font"></i>
                <input class="form-control placeholder-no-fix" type="text" placeholder="姓名" name="userName" id="userName"/>
            </div>
        </div>

        <div class="form-group">
            <label for="register_password" class="control-label visible-ie8 visible-ie9">密码</label>

            <div class="input-icon">
                <i class="fa fa-lock"></i>
                <input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password"
                       placeholder="密码" name="password"/>
            </div>
        </div>

        <div class="form-group">
            <label for="rpassword" class="control-label visible-ie8 visible-ie9">确认密码</label>

            <div class="controls">
                <div class="input-icon">
                    <i class="fa fa-check"></i>
                    <input class="form-control placeholder-no-fix" type="password" autocomplete="off"
                           placeholder="确认密码" name="rpassword" id="rpassword"/>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="question" class="control-label visible-ie8 visible-ie9">密码</label>

            <div class="input-icon">
                <i class="fa fa-lock"></i>
                <input class="form-control placeholder-no-fix" type="text" autocomplete="off" id="question"
                       placeholder="确认信息（用于找回密码！）" name="question"/>
            </div>
        </div>

        <p>
            请填写个人详细信息 :
        </p>

        <div class="form-group">
            <label for="phone" class="control-label visible-ie8 visible-ie9">手机</label>

            <div class="input-icon">
                <i class="fa fa-mobile-phone"></i>
                <input class="form-control placeholder-no-fix" type="text" placeholder="手机号" name="phone" id="phone"/>
            </div>
        </div>

        <div class="form-group">
            <!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
            <label for="registerEmail" class="control-label visible-ie8 visible-ie9">邮箱</label>

            <div class="input-icon">
                <i class="fa fa-envelope"></i>
                <input class="form-control placeholder-no-fix" type="text" placeholder="邮箱" name="email"
                       id="registerEmail"/>
            </div>
        </div>

        <div class="form-group">
            <label for="address" class="control-label visible-ie8 visible-ie9">地址</label>

            <div class="input-icon">
                <i class="fa fa-check"></i>
                <input class="form-control placeholder-no-fix" type="text" placeholder="地址" name="address"
                       id="address"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label visible-ie8 visible-ie9">国家</label>
            <label for="select2_sample4"></label>
            <select name="country" id="select2_sample4" class="select2 form-control">
                <option value=""></option>
                <option value="CN">中国</option>
                <option value="AM">美国</option>
                <option value="EG">埃及</option>
                <option value="FR">法国</option>
                <option value="DE">德国</option>
                <option value="IS">冰岛</option>
            </select>
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" name="tnc"/> 我已阅读并同意
                <a href="public/clauseInfo" target="_blank">
                    相关服务条款
                </a>
            </label>

            <div id="register_tnc_error">
            </div>
        </div>

        <div class="form-actions">
            <button id="register-back-btn" type="button" class="btn">
                <i class="m-icon-swapleft"></i> 返回
            </button>
            <button type="submit" id="register-submit-btn" class="btn green pull-right">
                注册 <i class="m-icon-swapright m-icon-white"></i>
            </button>
        </div>

        <div class="create-account">
            <p>
                已有账号&nbsp;
                <a style="cursor: pointer" href="login" >
                    直接登录!
                </a>
            </p>
        </div>
    </form>
    <!-- END REGISTRATION FORM -->
</div>
<!-- END LOGIN -->
<!-- BEGIN COPYRIGHT -->
<div class="copyright">
    2014 &copy; 长春工业大学. 苏格拉没有底开发小队 版权所有
</div>
<!-- END COPYRIGHT -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/plugins/select2/select2.min.js"></script>
<script src="assets/plugins/backstretch/jquery.backstretch.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/scripts/core/app.js" type="text/javascript"></script>
<script src="js/public/register.js" type="text/javascript"></script>
<script src="js/global/toast.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-toastr/toastr.js" type="text/javascript"></script>
</body>
<!-- END BODY -->
</html>

<!-- END PAGE LEVEL SCRIPTS -->
<script type="text/javascript">

    jQuery(document).ready(function () {
        App.init();
        jQuery('.register-form').show();
        Register.init();
    });

</script>
<!-- END JAVASCRIPTS -->